<template>
	<view>
		<view class="main">
			<view class="header-left" v-if="ztmf"  @click="paydesc">
				<image src="../../static/confirmOrder/tixing.png"></image>
				<text>收费标准</text>
			</view>
			<view  v-if="ztmf" class="company">
				<text>{{company}}</text>
				<view style="display: flex;line-height: 24rpx;align-items: center;">
					<view class="item-value" @tap="handleTap('picker1')">
						<text class="item-label">{{ label1 }}</text>
						<text v-if="!label1" class="item-placeholder"  >{{selecCompany}}</text>
					</view>
					<lb-picker ref="picker1" v-model="value1" mode="selector" :list="list" :props="myProps"
						confirm-color="#FF690D" :dataset="{ name: 'label1' }" @change="handleChange"
						@confirm="handleConfirm" @cancel="handleCancel">
					</lb-picker>
					<image src="../../static/confirmOrder/go.png"></image>
				</view>
			</view>
			<view class="home"  v-if="ztmf">
				<text>上门取货</text>
				<switch color="#FF690D" :checked="checked" @change="change">{{pickups}}</switch>
			</view>
			<view style="display: block;margin: 24rpx 24rpx 0;" v-if="checked">
				<input type="text" placeholder="输入取货地址"
					style="width: 612rpx;height: 80rpx;background: #F4F3F3;border-radius: 8rpx;margin: 0 auto;padding-left: 20rpx;padding-right: 20rpx;"
					@focus="showBox" confirm-type="search"  @blur="hideBox"  v-model="Nei" @confirm="ondang()" />
				<view class="add" v-if="show">

					<view v-for="(ys,index) in lists " :key='index' class="addBox">
						<text style="width: 80%;overflow: hidden;
							white-space: nowrap;
								text-overflow: ellipsis;" :data-value="ys" @touchstart="max">{{ys}}</text>
						<text style="color: #7B7B7B;" :data-index="index" @click="clear">清除</text>
					</view>
				</view>
				<text
					style="font-size: 22rpx;font-family: PingFangSC-Regular, PingFang SC;font-weight: 400;color: #7B7B7B;line-height: 32rpx;display: block;margin: 10rpx 0;">（如与发货人信息相同则无需填写）</text>
			</view>
			
			<view  v-if="checked||checkeds"  :class="[ztmf?'xbx':'','qcfd']" style="margin: 0 26rpx;">
				<view class="fl qhsj_txt">
					期望取货时间
				</view>
				<view class="fr qhsj_iocn">
					<image src="../../static/pages/jtbf.png" mode="" style="width: 28rpx;height: 35rpx;">
					</image>
				</view>
				<view  class="fr" :class="qwqhbh"  @click="showMask()">
					{{jt}} {{qwqhsj}}
				</view>
				<hTimeAlert title="取货时间" :isNow="false" rangeStartTime="7:30:00"  rangeEndTime="18:00:00"  :isRoundingTime="true"
					 :intervalTime="30" dayStartIntTime="-30" rangeDay="2"   defaultTime="7:30:00"
					 :isShow="isShow" :maskHide="true" :rangeType="true" :closeBtn="closeBtn" 
					@closeAlert="handelClose"></hTimeAlert>
			</view>
			
			<view class=""  v-if="ztmf">
				<view style="margin: 26rpx;"  >备注</view>
				<textarea type="text" placeholder="选填，输入备注" v-model="memo" class="text" />
				<text class="tips" v-if="showTime">（您的订单已经超过今日配送时间，将明日配送）</text>
			</view>
		</view>
		<view class="information">
			<text class="title">订单信息</text>
			<view class="informationList" v-for="item in orderList">
				<view class="consignee"  v-if="item.ps_type==2">
					<view class="who">
						<text class="ybj">收货人: </text><text>{{item.go_name}}</text>
					</view>
					<view class="phone">
						<text class="ybj"> </text><text>{{item.go_phone}}</text>
					</view>
					
				</view>
				
				<view class="consignee"  v-if="item.ps_type==2">
					<text class="address1">{{item.go_adress}}</text>
				</view>
				
				
				<view class=""  style="margin: 20rpx;border-bottom: 1rpx solid #E9E9E9;padding:20rpx 0 ;"  v-if="item.ps_type==1"   >
					<view class=""   >
						<view class="qcfd"  v-if="" >
							<view class="fl"
								style="width: 12rpx;height: 12rpx;border-radius: 16rpx;background-color: #2577FF;margin-top: 20rpx;margin-right:12rpx ;">
							</view>
							<view class="fl gnm" >{{item.shipUser==null?'- -':item.shipUser}} {{item.shipTel==null?'- -':item.shipTel}}</view>
						</view>
						
						<view class="" style="margin-left: 20rpx;font-size: 24rpx;">
							{{item.shipAddress}}
						</view>
					</view>
					<view class="" >
						<view class="qcfd">
							<view class="fl"
								style="width: 12rpx;height: 12rpx;border-radius: 16rpx;background-color: #FF690D;margin-top: 20rpx;margin-right:12rpx ;">
							</view>
							<view class="fl gnm" >{{item.go_name==null?'- -':item.go_name}} {{item.go_phone==null?'- -':item.go_phone}}</view>
						</view>
						<view class="" style="margin-left: 20rpx;font-size: 24rpx;">
							{{item.go_adress}}
						</view>
					</view>
					
				</view>
				
				<view class="shopName">
					<view class="ybj">货物名称: <text v-if="item.goods_name"
							style="margin-left: 10rpx;">{{item.goods_name}}</text>
							</view>
				</view>
				<view class="pay">
					<view class="type" v-if="item.payer == 2">
						<text class="ybj sbj">付款方式: </text><text class="sbj">到付</text>
					</view>
					<view class="type" v-if="item.payer == 1">
						<text class="ybj sbj">付款方式: </text><text class="sbj">寄付</text>
					</view>
					<view class="number">
						<text class="ybj sbj">件数: </text><text class="sbj">{{item.qty}}件</text>
					</view>
				</view>
				
				<view class=""  v-if="item.ps_type==1"  style="margin-left: 24rpx;font-size: 24rpx;color: #7B7B7B;margin-top: 10rpx;">
				备注: <text v-if="item.memo"
							style="margin-left: 10rpx;">{{item.memo}}</text>
				</view>
			</view>

		</view>
		<view class="footer"  >
			<button class="cancel" @click="cancel" >取消</button>
			<button @click="confirm" class="confirm" :disabled="jyan"  :loading="jyan">确认下单</button>
		</view>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	import requestUrl from '../../js_sdk/request/requestUrl.js'
	import moment from 'moment';
	import hTimeAlert from "@/components/h-time-alert/h-time-alert.vue";
	export default {
		data() {
			return {
				myProps: {
					label: 'name',
					value: 'id',
					children: 'child'
				},
				checked: false,
				show: false,
				showTime: false,
				outCpid: null,
				nowTime: null,
				endTime: null,
				startTime: null,
				endTimes: null,
				startTimes: '7:30:00',
				Nei: '',
				value1: '',
				label1: '',
				pickAddress: '',
				lists: [],
				memo: '',
				categoryCode: '',
				isPickup: 0,
				list: [],
				orderList: [],
				pickups: '否',
				isShow: false,
				maskHide: false,
				closeBtn: false,
				rangeType: false,
				expectePickTime:'',
				qwqhsj:'请选择期望取货时间',
				qwqhbh:'qhsj',
				company:'',
				ztmf:true,
				checkeds:false,
				selecCompany:'',
				jyan: false,
				jt:''
				
			}
		},
		components: {
			LbPicker,
			hTimeAlert
		},
		async onShow() {
			console.log('----',this.startTime)
			let now=moment(new Date()).format('HH:mm:ss')
			 let hfn= moment.duration(now).as('seconds')
			let zfn=moment.duration('18:00:00').as('seconds')
			
			
		},
		
		async onLoad(option) {
				console.log('城内',option.data)
			this.orderList = JSON.parse(option.data)
			if(this.orderList[0].ps_type==2){
				this.company='物流公司'
				this.checkeds=false
				this.selecCompany='请选择物流公司'
				console.log('this.selecCompany物流',this.selecCompany,this.company)
				await this.getLogistics()
				
			}else if(this.orderList[0].ps_type==1){
				this.company='服务公司'
				this.checkeds=true
				this.ztmf=false
			}
			
			
			 
			
			if(uni.getStorageSync('outCpid')||uni.getStorageSync('outCpids')){
				if(this.ztmf){
					this.outCpid=uni.getStorageSync('outCpid')
				}
				for(let i=0;i<this.list.length;i++){
					console.log('cnmd')
					if(this.outCpid==this.list[i]['id']){
						this.label1 = this.list[i]['name']
						console.log('selec',this.label1)
						this.endTimes = this.list[i]['endTime']
						let startTime=this.list[i]['startTime']
						// this.this.$refs.child1.childMethod(startTime,endTime) 
						console.log('this.startTimes',this.endTimes)
						let now=moment(new Date()).format('HH:mm:ss')
						this.nowTime = moment.duration(now).as('seconds')
						this.startTime = moment.duration(startTime).as('seconds')
						this.endTime = moment.duration(this.endTimes).as('seconds')
						// this.outCpName = label
						if (this.nowTime >= this.startTime && this.nowTime <= this.endTime) {
							this.showTime = false
							console.log('glsj',now,startTime,this.list[i]['endTime'])
						} else {
							console.log('glsj',now,startTime,this.list[i]['endTime'])
							this.showTime = true
						}
					}
				}
			}
			
			
			
			 
			
		},
		methods: {
			paydesc(){
				if(this.label1=='大鱼物流'){
					uni.navigateTo({
						url:"../dayuwuliu/dayuwuliu"
					})
				}else if(this.label1=='启佳转运'){
					uni.navigateTo({
						url:"../qijiawuliu/qijiawuliu"
					})
				}else{
					this.$api.msg('请选择物流公司')
				}
			},
			
			handelClose(data) {
				this.isShow = false;
				console.log(data); //data={
				// 	date: "2020/3/30 09:00"
				// 	_date: "2020-3-30 09:00"
				// 	dateRange: "2020/3/30 09:00-09:30"
				// 	_dateRange: "2020-3-30 09:00-09:30"
				// 	timeStamp: 1585530000000
				// }
				if(data){
					let jt=moment(new Date()).format('YYYY/MM/DD')
					 let cglsj=moment(data.date).format('YYYY/MM/DD')
					
					if(jt<cglsj){
						this.jt='明天'
					}else{
						this.jt='今天'
					}
					
					
					let ccc=moment(new Date()).format('YYYY/MM/DD HH:mm:ss')
					let zzz=moment(ccc).add(30,'m')._d
					
					let timec = moment(new Date()).format('HH:mm:ss')
					 let sjc=moment.duration(data.dateEndRang).as('seconds') - moment.duration(timec).as('seconds')
					if(this.jt=='今天'){
						if(sjc<1800){
							this.qwqhsj='半小时内'
							this.expectePickTime=moment(new Date()).format('YYYY/MM/DD HH:mm:ss')+'-'+moment(zzz).format('YYYY/MM/DD HH:mm:ss')
							console.log('this.expectePickTimesss',this.expectePickTime)
						}else{
							this.qwqhsj=data.dateRangess
							this.expectePickTime=data.dateRange
						}
					}else{
						this.qwqhsj=data.dateRangess
						this.expectePickTime=data.dateRange
					}
					
					this.qwqhbh='qhsjs'
				}
			},
			showMask() {
				if(!this.outCpid&&this.ztmf){
					return this.$api.msg(this.selecCompany)
				}
				this.isShow = true;
				console.log('this.outCpid',this.outCpid)
									 
				let jtsj = moment(new Date()).format('HH:mm:ss')
				this.nowTime = moment.duration(jtsj).as('seconds')
				let wsjcdd=moment.duration('18:00:00').as('seconds')-this.nowTime
				let  zsjcdd=moment.duration('7:30:00').as('seconds')-this.nowTime
				 let startTime=moment(new Date()).format('HH:mm:ss')
				 let endTime=moment(new Date()).format('HH:00:00')
				 let sjc= moment.duration(startTime).as('seconds')-moment.duration(endTime).as('seconds')
				 
				 
				 
				
				 
				 
				 if(this.nowTime<this.startTime){
					 this.startTimes=moment(this.startTime).format('HH:mm:ss')
				 }else{
					 if(sjc>1800){
					 				
					 				this.startTimes = moment(new Date()).format('HH:30:00')
					 				  console.log('this.startTimes',this.startTimes)
									 
					 }else{
					 				 this.startTimes = moment(new Date()).format('HH:00:00')
					 				 console.log('this.startTimes',this.startTimes)
					 }
				 }
				 
				 if(zsjcdd>0){
				 					 console.log('zsjcdd',zsjcdd)
				 					 this.startTimes='7:30:00'
				 }
				 
			},
			async getLogistics() {
				const res = await this.$request.get(requestUrl.LIST_LOGISTICS_URL, {
					data: {}
				}); //调取API接口
				console.log('wu',res)
				this.list = res

			},
			
			
			
			async confirm() {
				
						console.log('zzzz',this.outCpid)
						console.log('zzzz',this.expectePickTime)
				if (!this.outCpid&&this.ztmf) {
					return this.$api.msg(this.selecCompany)
				}
				
				if(this.ztmf){
					if(this.expectePickTime == ''&&this.checked){
						return this.$api.msg('请选择取货时间')
						console.log('this.expectePickTime1',this.expectePickTime)
					}
					
				} else{
					console.log('this.expectePickTime',this.expectePickTime)
					if(this.expectePickTime == ''){
						return this.$api.msg('请选择取货时间')
					}
					}	
					
				
				this.jyan=true
				
					let array = this.orderList
					array.forEach((value, index) => {
						if(this.ztmf){
							value['isPickup'] = this.isPickup
							value['outCpid'] = this.outCpid
							value['memo'] = this.memo
						}else{
							value['isPickup'] = 1
							
						}
						
						value['pickAddress'] = this.Nei
						value['expectePickTime']=this.expectePickTime
					})
					
					console.log('array',array)

					if(this.ztmf){
						try{
							var resa = await this.$request.post(requestUrl.CREATE_ORDER_URL, {
								data: array
							}); 
						}catch(e){
							this.$api.msg("网络异常，请重试")
						return	this.jyan = false
							
						}
						
						
					
					}else{
						try{
							var resa = await this.$request.post(this.$requestUrl.Cn_create_URL, {
								data: array
							}); //调取API接口
						}catch(e){
							this.$api.msg("网络异常，请重试")
							return	this.jyan = false
						}
					}
					
					if (resa) {
						let res1 = await this.$request.post(this.$requestUrl.DELE_ORDER_URL, {
							data: {
								status: -1,
								orderType:this.orderList[0].ps_type
							},
							
							
						});
						
						setTimeout(function() {
								this.jyan = false
						}, 1000);
						uni.showToast({
							title: '已下单',
							icon: "success",
							duration: 1000,
							
						});
					}


					
					
					if(this.ztmf){
						uni.setStorageSync('cn',1)
					}else{
						uni.setStorageSync('cn',2)
					}

					setTimeout(function() {
						
						uni.switchTab({
							url: '../order/order'
						});
					}, 2500);

				

			},
			cancel() {
    uni.navigateBack({
						delta: 1
					})
			},
			value() {
				//this.show = false
				if (this.Nei !== "" && !this.lists.includes(this.Nei)) {
					this.lists.unshift(this.Nei)
					
				}
				
				if(this.lists.length>3){
					this.lists=this.lists.slice(0,3)
					uni.setStorage({ //本地保存
						key: 'neirong',
						data: JSON.stringify(this.lists) //转换为字符串形式
					})
				}else{
					uni.setStorage({ //本地保存
						key: 'neirong',
						data: JSON.stringify(this.lists) //转换为字符串形式
					})
				}

				
			},
			change: function(e) {
				this.checked = e.target.value
				
				this.show = false
				if (this.checked == true) {
					this.isPickup = 1
					this.pickups = '是'
				} else {
					this.isPickup = 0
					this.pickups = '否'
				}


			},
			showBox:  function() {
				this.hestory()
				this.show = true
			},
			hideBox() {
							this.value()
							this.show = false
						},
			max(e) {
				this.Nei = e.currentTarget.dataset.value
				this.show = false
				e.preventDefault();
				console.log(this.Nei)
				
			},
			ondang() {
				this.value()
				this.show = false
			},
			clear(e) {
				var index = e.currentTarget.dataset.index
				this.lists.splice(index, 1)
				uni.removeStorage({
					key: 'neirong'
				});
				uni.setStorage({ //本地保存
					key: 'neirong',
					data: JSON.stringify(this.lists) //转换为字符串形式
				})
			},
			async hestory() {
				let searchList = await uni.getStorage({
					key: 'neirong'
				});

				if (searchList[1]) {
					this.lists = JSON.parse(searchList[1].data);

				}
			},


			handleTap(name) {
				this.$refs[name].show()
			},
			handleChange(e) {

			},
			handleConfirm(e) {
				// 如果存在多个picker，可以在picker上设置dataset属性，confirm中获取，就能区分是哪个picker了
					
				if (e) {
					console.log('e',e)
					const name = e.dataset.name
					const label = e.item.name
					const value = e.item.id
					let endTime = e.item.endTime
					let startTime = e.item.startTime
					this.endTimes = e.item.endTime
					let jtsj = moment(new Date()).format('HH:mm:ss')
					this.nowTime = moment.duration(jtsj).as('seconds')
					// this.this.$refs.child1.childMethod(startTime,endTime) 
					console.log('this.startTimes',endTime,startTime)
					this.startTime = moment.duration(startTime).as('seconds')
					this.endTime = moment.duration(endTime).as('seconds')
					if(this.ztmf){
						this.outCpid = value
						uni.setStorageSync('outCpid',value)
					}else{
						this.outCpid = value
						uni.setStorageSync('outCpids',value)
					}
					// this.outCpName = label
					if (name && label) {
						this[name] = label
						this.label1=label
						console.log('name',this[name])
					}
					if (this.nowTime >= this.startTime && this.nowTime <= this.endTime) {
						console.log('this.startTimes',this.nowTime,endTime,startTime)
						this.showTime = false
					} else {
						this.showTime = true
						console.log('this.startTimes',this.nowTime,endTime,startTime)
					}
				}
			},
			handleCancel(e) {

			}
		}

	}
</script>

<style>
	.main {
		width: 702rpx;
		/* height: 319px; */
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		margin-top: 24rpx;
		padding: 24rpx 0;
		margin-bottom: 32rpx;
	}

	.add {
		width: 654rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 20rpx 0px rgba(0, 0, 0, 0.28);
		border-radius: 8rpx;
		margin: 0 auto;
	}

	.add :last-child {
		border: none;
	}

	.addBox {
		display: flex;
		justify-content: space-between;
		width: 90%;
		margin: 0 auto;
		border-bottom: 1rpx solid #E9E9E9;
		height: 60rpx;
		line-height: 60rpx;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}
	
	.addBox:last-child{
		border: none;
	}

	.header-left {
		display: flex;
		justify-content: flex-end;
		
		margin-right: 26rpx;
	}

	.header-left text {
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7B7B7B;
		line-height: 30rpx;
		margin-left: 10rpx;
	}

	.header-left image {
		width: 26rpx;
		height: 26rpx;
		line-height: 34rpx;
	}

	.company {
		display: flex;
		justify-content: space-between;
		margin: 26rpx;
		border-bottom: 2rpx solid #E9E9E9;
		padding-bottom: 24rpx;
	}

	.company image {
		width: 16rpx;
		height: 26rpx;
		margin-left: 10rpx;
		line-height: 34rpx;

	}

	.home {
		display: flex;
		justify-content: space-between;
		margin: 26rpx;
		margin-top: 24rpx;
		
	}

	.text {
		width: 612rpx;
		height: 120rpx;
		background: #F4F3F3;
		border-radius: 8rpx;
		margin: 0 auto;
		margin-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-top: 10rpx;
		margin-top: 12rpx;
	}

	.informationList {
		width: 704rpx;
		margin: 0 auto;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding-bottom: 24rpx;
		margin-bottom: 16rpx;

	}

	.informationList text {


		padding-top: 20rpx;

	}

	.information {
		padding-bottom: 140rpx;
	}

	.title {
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: bold;
		color: #2C2C2D;
		line-height: 24rpx;
		display: block;
		margin-left: 24rpx;
		margin-bottom: 16px;
	}

	.consignee text {
		font-size: 32rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: bold;
		color: #2C2C2D;
		line-height: 40rpx;
	}

	.consignee {
		display: flex;
		margin: 0 24rpx;
	}

	.pay {
		margin-left: 24rpx;
		display: flex;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7B7B7B;
		line-height: 34rpx;
	}

	.number {
		margin-left: 80rpx;
		display: flex;
	}

	.who {
		display: flex;
	}

	.phone {
		display: flex;
		margin-left: 10rpx;
	}

	.type {
		display: flex;
	}

	.footer {
		width: 100%;
		height: 120rpx;
		background-color: #FFFFFF;
		display: flex;
		align-items: center;
		position: fixed;
		bottom: 0;
		padding-bottom: 22rpx;
	}

	.cancel {
		width: 320rpx;
		height: 80rpx;
		border-radius: 40rpx;
		border: 2rpx solid #979797;
		color: #979797;
		line-height: 80rpx;
	}

	.confirm {
		width: 320rpx;
		height: 80rpx;
		background: #FF690D;
		border-radius: 40rpx;
		color: #FFFFFF;
		line-height: 80rpx;
	}

	.tips {
		font-size: 22rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #DB1E1E;
		line-height: 32rpx;
		display: block;
		text-align: center;
		margin: 0 auto;
	}

	.address1 {
		width: 500rpx !important;
		overflow: hidden;
		word-break: break-all;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		white-space: nowrap;
		font-size: 28rpx !important;
		font-weight: 400 !important;
		padding-top: 10rpx;
	}

	.shopName {

		margin: 0 24rpx;
		display: flex;
		font-size: 24rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7B7B7B;
		line-height: 34rpx;
		margin-top: 10px;
	}

	.ybj {
		margin-right: 8rpx;
	}

	.sbj {
		padding-top: 10rpx !important;
	}
	
	.qhsj_txt {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #2C2C2D;
	}
	
	.qhsj {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #7B7B7B;
		margin-right: 10rpx;
	}
	
	.qhsjs {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF690D;
		margin-right: 10rpx;
	}
	
	.qhsj_icon {
		margin-top: 4rpx;
	}
	
	.gnm {
		font-size: 32rpx;
		font-weight: bold;
		
		color: #2C2C2D;
	}
	
	.xbx{
		padding: 20rpx 0 ;border-bottom: 1rpx solid #E9E9E9;
	}
</style>
